<template>
  <div class="baspoke">
    <livheade logo="true"></livheade>
    <div class="videoClass" @click="playPause()">
      <div class="w1100" style="position: relative;">
        <p><br><br><br></p><p style="text-align: center;">
          <video  id='myVideo'  src="http://www.livethree.com.cn/sample.mp4" width="90%" preload="auto"  >您的浏览器不支持 video 标签。</video>
        </p>
        <h4 id="play_toast" style="display: block; top: 30%;font-size: 12px;left:50%; position: absolute;transform: translate(-50%);">赶紧点击进入精彩模拟课堂吧！</h4>
        <img src="http://www.livethree.com.cn/res/img/play.png" id="play_btn" style="width: 50px; height: 50px;top: 50%; left:50%; position: absolute;transform: translate(-50%);">
      </div>
    </div>
  </div>
</template>
<script>
  import livheade from '@/components/header/heade'
  import videobg from '@/assets/videobg.png'

  export default {
    name: 'videoclass',
    components: {livheade},
    data () {
      return {
        logo2: false
      }
    },
    methods: {
      playPause () {
        var myVideo = document.getElementById('myVideo')
        console.dir(myVideo + '/' + myVideo.paused + videobg)
        if (myVideo.paused) {
          document.getElementById('play_btn').style.display = 'none'
          document.getElementById('play_toast').style.display = 'none'
          myVideo.play()
        } else {
          myVideo.pause()
          document.getElementById('play_btn').style.display = 'block'
          document.getElementById('play_toast').style.display = 'block'
        }
      }
    }
  }
</script>
<style scoped lang="scss">
  .videoClass{
    padding-left: 12px;
    padding-right:12px;
  }
  video {
    background-image: url("../assets/videobg.png");
  }

</style>
